<!DOCTYPE html>
<html>
<head>
<title>Sample1.html</title>
<style type="text/css">
@import "../themes/claro/document.css";
@import "../themes/claro/claro.css";
@import "../app.css";
</style>
<script type="text/javascript" data-dojo-config="'async':true,'parseOnLoad':true,'packages':[{'name':'clipart','location':'../../clipart'},{'name':'shapes','location':'../../shapes'},{'name':'maqetta','location':'../../maqetta'}]" src="../lib/dojo/dojo/dojo.js"></script>
<script type="text/javascript">
require([
  "dijit/layout/TabContainer",
  "dijit/layout/ContentPane",
  "dijit/form/Button",
  "dijit/form/ComboBox",
  "dijit/form/MultiSelect",
  "dijit/form/TextBox",
  "maqetta/space",
  "maqetta/AppStates"
]);
</script>
<script type="text/javascript"  src="../app.js"></script>
</head>
<body class="claro" data-maq-ws="collapse" id="myapp" data-maq-flow-layout="true" dvStates="{'Add Task':{'origin':true},'Task Added':{'origin':true}}">
<span data-dojo-type="dijit/layout/TabContainer" style="width: 300px; height: 250px; min-width: 1em; min-height: 1em;" controllerWidget="dijit.layout.TabController">
<div data-dojo-type="dijit/layout/ContentPane" title="Tasks" selected="true" closable="false" style="width: 376px; height: 180px;">
 <div style="text-align: right;">
  <input type="button" data-dojo-type="dijit/form/Button" label="New" onclick="davinci.states.setState('Add Task')"></input>
  <input type="button" data-dojo-type="dijit/form/Button" label="Del"></input>
</div>
 <div style="padding-top: 10px; padding-bottom: 10px;">
<label>
Sort by:</label>
  <select data-dojo-type="dijit/form/ComboBox" value="Name" style="width: 126px; margin-left: 5px;">
    <option dvwidget="html.option" value="Name" selected="true">
      Name</option>
    <option dvwidget="html.option" value="Due date" selected="false">
      Due date</option>
  </select>
</div>
 <select multiple="true" data-dojo-type="dijit/form/MultiSelect"  style="display: none; width: 200px;" dvStates="{'Task Added':{'style':{'display':''}}}">
   <option dvwidget="html.option" value="Task 1" selected="false">
     Task 1</option>
 </select>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Projects" style="width: 376px; height: 180px;" doLayout="false"></div>
<div data-dojo-type="dijit/layout/ContentPane" title="Roles"></div>
</span>
<div data-dojo-type="dijit/layout/ContentPane" title="Pane" doLayout="false" style="border-color: #053ef8; border-width: 1px; border-style: solid; background-color: #ffffff; width: 350px; height: 75px; position: absolute; left: 72px; top: 79px; display: none;" dvStates="{'Add Task':{'style':{'display':''}}}">
 <div style="font-weight: bold; text-align: center; padding-top: 6px; padding-left: 6px;">
   Add new task</div>
 <div>
  <label>
    Task name:</label>
  <input type="text" data-dojo-type="dijit/form/TextBox"></input>
  <input type="button" data-dojo-type="dijit/form/Button" label="Add" onclick="davinci.states.setState('Task Added')"></input>
</div>
</div>
</body>
</html>
